<template>
  <div class="h100 commonTableSty" ref="groupTableList">
    <s-table
      ref="table"
      class="h100"
      :columns="columns"
      :data="loadData"
      :scrollX="940"
      :row-key="(record,index)=>index"
    >
      <template
        slot-scope="text"
        v-for="column in commonColumns"
        :slot="column.scopedSlots.customRender"
      >
        <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template #vin="text,record">
        <a @click="doAction('showVehicleDetail', record)"><table-ellipsis :text="text"></table-ellipsis></a>
      </template>
      <template #serviceName="text,record">
        <a @click="doAction('showServiceDetail', record)"><table-ellipsis :text="text"></table-ellipsis></a>
      </template>
      <template #serviceCode="text,record">
        <a @click="doAction('showServiceDetail', record)"><table-ellipsis :text="text"></table-ellipsis></a>
      </template>
      <!-- 服务开始日期 -->
      <template #activateTime="text">
        <table-ellipsis :text="text?$options.filters.moment(text):'-'"></table-ellipsis>
      </template>
      <!-- 服务到期日期 -->
      <template #serviceExpireDate="text">
        <table-ellipsis :text="text?$options.filters.moment(text):'-'"></table-ellipsis>
      </template>
      <!-- 激活发起时间 -->
      <template #activateStartTime="text">
        <table-ellipsis :text="$options.filters.moment(text)"></table-ellipsis>
      </template>
      <!-- 激活状态 -->
      <template #serviceStatus="text">
        <table-ellipsis :text="activeStateType[text] || '-'"></table-ellipsis>
      </template>
      <template #operation="text,record">
        <a-button type="primary" :ghost="true" size="small" @click="doAction('showSubscriptionDetail', record)">{{ $t('detail') }}</a-button>
      </template>
    </s-table>
  </div>
</template>
<script>
import { subscriptionTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { mapState } from 'vuex'
import subscriptionQueryApi from '@/api/modules/system/subscriptionQuery'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    tableEllipsis,
    STable,
    AuthButton
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.subscriptionMaintain.queryParams,
      subsServiceStatusDictCode: (state) => state.dict.subsServiceStatusDictCode,
      activeStateType: (state) => {
        let obj = {}
        state.serviceConfig.activeStateType.forEach(e => {
          obj[e.value] = e.name
        })
        return obj
      }
    }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    },
  },
  data () {
    return {
      columns: subscriptionTbColumns,
      sortedInfo: null
    }
  },
  watch: {
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    loadData (parameter) {
      const params = { ...this.queryParams, ...parameter }
      return subscriptionQueryApi.getActiveList(params)
    },
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })
    },
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    getPageDictData () {
      ['getSubsServiceStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.mr12 {
  margin-right: 12px;
}
.relatedEcuNum {
  font-weight: bold;
  margin-left: 5px;
}
</style>
